<@admin.header title="联系人分组列表"><@common.zTree/>
<script type="text/javascript">
    App.ns('ContactGroup');
    // Function for Filtering
    function searchFirstList(inputVal, searchArea){
        var allCells = $(searchArea).find('option');
        if (allCells.length > 0) {
            var found = false;
            allCells.each(function(index, option){
                var regExp = new RegExp(inputVal, 'i');
                if (regExp.test($(option).text())) {
                    $(option).show();
                }
                else {
                    $(option).hide();
                }
            });
        }
    }
    
    // function: UnAssignment
    function assignList(){
        $('#firstList :selected').each(function(i, selected){
            // append to second list box
            $('#secondList').append('<option value="' + selected.value + '">' + selected.text + '</option>');
            // remove from first list box
            $("#firstList option[value='" + selected.value + "']").remove();
        });
    }
    
    // function: UnAssignment
    function unassignList(){
        $('#secondList :selected').each(function(i, selected){
            // append to first list box
            $('#firstList').append('<option value="' + selected.value + '">' + selected.text + '</option>');
            // remove from second list box
            $("#secondList option[value='" + selected.value + "']").remove();
        });
    }
    
    function fillOptions(selector, array){
        var $target = $('#' + selector);
        $target.empty();
        App.each(array, function(e){
            $target.append($('<option>', {
                value: e.id || '',
                text: String.format('{0}({1})', e.name || '', e.tel || '')
            }));
        });
    }
    function onSubmit(){
		var $form = $('#mainForm');
		App.MessageBox.confirm("是否确认修改?",function(){
			$('#secondList option').each(function(i, selected){
	            $(this).attr("selected",'selected');
	        });
			$form.submit();
		});
	}
    $(document).ready(function(){
    
        App.network.Ajax.post('${base}/contactgroup/selectedContacts.do', {
            'groupId': '${groupId}'
        }, function(re){
            fillOptions('secondList', re.root);
        });
        App.network.Ajax.post('${base}/contactgroup/unSelectedContacts.do', {}, function(re){
            fillOptions('firstList', re.root);
        });
        
        $('#boxClear').click(function(){
            $('#firstFilterSearch').val('');
            
        });
        
        $('#firstFilterSearch').keyup(function(){
            var searchArea = $('#firstList');
            searchFirstList($(this).val(), searchArea);
        });
        $('#secondFilterSearch').keyup(function(){
            var searchArea = $('#secondList');
            searchFirstList($(this).val(), searchArea);
        });
        
        $('#firstList').dblclick(function(){
            assignList();
        });
        
        $('#secondList').dblclick(function(){
            unassignList();
        });
        
        $('#to2').click(function(){
            assignList();
        });
        
        $('#to1').click(function(){
            unassignList();
        });
        
    });
</script>
</@admin.header>
<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="list.do">系统菜单管理管理</a>
            </li>
            <li>
                <a href="#">系统菜单管理列表</a>
            </li>
        </ul>
    </div>
    <div class="rightinfo">
        <!--默认查询表单-->
        <div class="tools">
            <input type="hidden" name="pageNo" value="1"/>
        </div>
    </div><!-- Definition of context menu -->
    <style>
        .selectBox {
            float: left;
            width: 740px;
            height: 480px;
            margin: 20px 20px;
            padding: 5px 5px;
            border: 1px dashed #000;
        }
        
        .selectBox select {
            border: 1px solid #000;
            padding: 5px 5px;
            margin: 10px 10px;
        }
        
        .selectBox input {
            border: 1px solid #000;
        }
    </style>
    <form id="mainForm" method="post" action="correlate.do">
    	<input type="hidden" name="groupId" value="${groupId}" />
        <div class="selectBox">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td width="100%">
                        <table cellpadding="0" id="tbl_format"cellspacing="0" border="0" width="100%" class="standard_table_v4">
                            <thead>
                            </thead>
                            <tbody>
                                <tr>
                                    <td align="left" width="310px">
                                        &nbsp;&nbsp;搜索: <input id="firstFilterSearch" type="text"/>
                                        <br>
                                        &nbsp;&nbsp;未分配
                                        <br>
                                        <select id="firstList" multiple="multiple" style="height:380px;width: 300px;">
                                        </select>
                                    </td>
                                    <td align="left">
                                        <input id="to2" type="button" name="to2" title='assign' value=">" />
                                        <br/>
                                        <br/>
                                        <input id="to1" type="button" name="to1" title='unassign' value="<">
                                    </td>
                                    <td>
                                        &nbsp;&nbsp;搜索: <input id="secondFilterSearch" type="text"/>
                                        <br>
                                        &nbsp;&nbsp;已分配
                                        <br>
                                        <select id="secondList" multiple="multiple" name="ids" style="height:380px;width: 300px;">
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </table>
            <ul>
                <li>
                    &nbsp;&nbsp;&nbsp;<input type="button" class="btn" value="保存分组联系人" onclick="onSubmit();"/>
                </li>
            </ul>
        </div>
    </form>
</body>
</html>